<template>
  <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 ease-in-out"
    :class="{ 'bg-dark-light/95 backdrop-blur-lg shadow-lg': isScrolled, 'bg-transparent': !isScrolled }">
    <!-- 无头设计：滚动时添加背景和阴影 -->
    <div class="container mx-auto px-4 py-4">
      <div class="flex items-center justify-between h-12 md:h-16 transition-all duration-300"><!-- 调整高度使导航更轻盈 -->
        <!-- Logo -->
        <router-link to="/" class="flex items-center space-x-2">
          <div
            class="w-10 h-10 rounded-full bg-primary/90 flex items-center justify-center shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-all duration-300 transform hover:scale-105">
            <i class="fa fa-cube text-white text-xl"></i>
          </div>
          <span class="text-lg md:text-xl font-bold text-white transition-all duration-300">科技创客空间</span>
        </router-link>

        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-6 md:space-x-8 transition-all duration-300">
          <router-link to="/"
            class="text-white hover:text-primary px-2 py-1 rounded transition-all duration-300 hover:bg-primary/10">首页</router-link>
          <router-link to="/categories"
            class="text-gray-300 hover:text-white px-2 py-1 rounded transition-all duration-300 hover:bg-primary/10">分类</router-link>
          <router-link to="/tags"
            class="text-gray-300 hover:text-white px-2 py-1 rounded transition-all duration-300 hover:bg-primary/10">标签</router-link>
          <router-link to="/about"
            class="text-gray-300 hover:text-white px-2 py-1 rounded transition-all duration-300 hover:bg-primary/10">关于</router-link>
        </nav>

        <!-- 搜索按钮 -->
        <div class="hidden md:flex items-center">
          <button
            class="w-9 h-9 rounded-full bg-primary/20 hover:bg-primary/40 flex items-center justify-center transition-all duration-300 transform hover:scale-105">
            <i class="fa fa-search text-gray-300"></i>
          </button>
        </div>

        <!-- 移动端菜单按钮 -->
        <button
          class="md:hidden w-9 h-9 rounded-full bg-primary/20 flex items-center justify-center transition-all duration-300 transform hover:scale-105"
          @click="isMenuOpen = !isMenuOpen">
          <i class="fa fa-bars text-gray-300"></i>
        </button>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div v-if="isMenuOpen"
      class="md:hidden bg-dark-light/95 backdrop-blur-lg py-4 px-4 animate-fadeIn rounded-b-2xl border-x border-b border-gray-custom/50 mx-2 mt-1">
      <!-- 移动端菜单优化 -->
      <nav class="flex flex-col space-y-4">
        <router-link to="/" class="text-white font-medium py-2 border-b border-gray-custom/50"
          @click="isMenuOpen = false">首页</router-link>
        <router-link to="/categories"
          class="text-gray-300 hover:text-primary transition-colors py-2 border-b border-gray-custom/50"
          @click="isMenuOpen = false">分类</router-link>
        <router-link to="/tags"
          class="text-gray-300 hover:text-primary transition-colors py-2 border-b border-gray-custom/50"
          @click="isMenuOpen = false">标签</router-link>
        <router-link to="/about" class="text-gray-300 hover:text-primary transition-colors py-2"
          @click="isMenuOpen = false">关于</router-link>
        <div class="relative mt-2">
          <input type="text" placeholder="搜索文章..."
            class="w-full bg-gray-custom/30 border border-gray-custom rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
          <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
        </div>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      isScrolled: false
    }
  },
  methods: {
    handleScroll() {
      // 当页面滚动超过50px时，添加背景和阴影
      this.isScrolled = window.scrollY > 50;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

<style scoped>
/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

/* 导航项动画 */
.router-link-active {
  position: relative;
}

.router-link-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(to right, primary, purple-400);
  border-radius: 1px;
}

.backdrop-blur-lg {
  background: rgba(20, 24, 40, 0.12);
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 4px 32px #0002;
}
</style>